<div id="about">
  <div id="about-card">
    <div id="about-btn-close">
      <i class="fa fa-times"></i>
    </div>
    {{ with ($.Scratch.Get "authorPicture") }}
      <img id="about-card-picture" src="{{ . }}{{ if in . "//www.gravatar.com/avatar/" }}?s=110{{ end }}" alt="{{ i18n "global.author_picture" }}" />
    {{ end }}
    <h4 id="about-card-name">{{ .Site.Author.name }}</h4>
    {{ with .Site.Author.bio }}
      <div id="about-card-bio">{{ . | markdownify }}</div>
    {{ end }}
    {{ with .Site.Author.job }}
      <div id="about-card-job">
        <i class="fa fa-briefcase"></i>
        <br/>
        {{ . | markdownify }}
      </div>
    {{ end }}
    {{ with .Site.Author.location }}
      <div id="about-card-location">
        <i class="fa fa-map-marker-alt"></i>
        <br/>
        {{ . }}
      </div>
    {{ end }}
  </div>
</div>
